<template>
    <div>
    <div v-if="this.collectList.length==0">
      <img src="../../assets/imgs/cart-empty.png" alt="">
    </div>
          <ul v-else>
            <li
              v-for="item in collectList"
              :key="item.id"
              
            >
              <img
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                alt=""
                @click="goTo(item.product_id)"
              />
              <p class="pl"> <i class="el-icon-close" @click="del(item.product_id)"></i> </p>
              <p>{{ item.product_name }}</p>
              <p class="pTwo">{{ item.product_title }}</p>
              <p class="pThree">{{ item.product_price }} 元</p>
            </li>
          </ul>
    </div>
</template>

<script>
import {getCollect,delCollect} from '../../api/api'
    export default {
        data() {
            return {
                collectList: [],
                 userId:JSON.parse(localStorage.getItem("user") || []),
            }
        },
        created () {
            this.getList();
        },
        methods: {
    goTo(v) {
      console.log(v, "v");
      this.$router.push({
        name: "details",
        params: {
          productID: v,
        },
      });
    },
          // 删除
          async del(v){
            let res=await delCollect(
              {
                user_id:this.userId.user_id,
                product_id:v
              }
            )
            if(res.code=="001"){
              this.getList()
                      this.$notify.success({
          title: "删除成功",
          message:res.msg,
          type: "success",
        });
            }
            console.log(40,res);
          },
          // 渲染
            async getList() {
                   let id = JSON.parse(localStorage.getItem("user") || []);
      // let id=localStorage.getItem("code")
                  console.log(id, "id");
                  let userId = id.user_id;
                let res=await getCollect({user_id:userId})
                console.log(res,"collect");
                if(res.code=="001"){
                   this.collectList=res.collectList
                }else{
                 this.$message.warning(res.msg)
                }
               
            }
        },
    }
</script>

<style scoped > 
ul{
      width: 90%;
      margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
ul li{
   width: 19%;
  height: 300px;
  background-color: #fff;
  margin-left: 10px;
  margin-top: 15px;
  text-align: center;
  font-size: 15px;
  line-height: 25px;
  position: relative;
}
ul li img {
  width: 85%;
  height: 200px;
}
.pTwo {
  font-size: 10px;
  color: #ddd;
}
.pThree {
  color: rgb(215, 0, 0);
}
.pl{
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 20px;
}
li:hover{
      box-shadow: 10px 0px 10px 0 #d2d2d2;
      transform: translate(-1%, -1%);
    /* //   .pl{
    //     display: block
    //   } */
}
.pl:hover{
    color: rgb(239, 0, 0);
}
</style>